﻿@page "/docs/extensions/datagrid/selection"

<Seo Canonical="/docs/extensions/datagrid/selection" Title="Blazorise DataGrid selection" Description="Learn how to use Blazorise DataGrid selection." />

<DocsPageTitle>
    DataGrid: Selection
</DocsPageTitle>

<DocsPageSection>
    <DocsPageSectionHeader Title="Selecting">
        If you need to control how and when the grid row will be selected you can use a <Code>RowSelectable</Code> event handler. Here's a simple example where John's row is not selectable:
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridSelectingExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridSelectingExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Custom Row Colors">
        You have full control over appearance of each row, including the selected rows.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridCustomRowColorsExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridCustomRowColorsExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="Multiple Selection">
        <Paragraph>Set <Code>SelectionMode</Code> to <Code>DataGridSelectionMode.Multiple</Code> to enable multiple selection on Datagrid.</Paragraph>
        <Paragraph>Clicking rows will now select multiple records at a time. You can now access them by using the <Code>SelectedRows</Code> parameter and also bind to the <Code>SelectedRowsChanged</Code> event callback.</Paragraph>

        <Paragraph>Optionally you can use the new Datagrid column <Code>DataGridMultiSelectColumn</Code> to enable a checkbox column that works exclusively with multiple selection.</Paragraph>
        <Paragraph>
            You can either use your own <Code>MultiSelectTemplate</Code> render fragment to customize the input that will appear in the column and trigger the multiple selection by then binding to the provided <Code>SelectedChanged</Code> event callback or just use the provided default by not specifying a <Code>MultiSelectTemplate</Code> render fragment. When using this extra column, the top row column, will provide the ability to select or unselect all rows.
        </Paragraph>
        <Paragraph>
            Shift-clicking will also select multiple rows starting from the last selected row.
        </Paragraph>
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridMultipleSelectionExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridMultipleSelectionExample" />
</DocsPageSection>

<DocsPageSection>
    <DocsPageSectionHeader Title="RowSelectable & Multiple Selection">
        Here's an example of combining both RowSelectable and Multiple Selection. We've disabled regular selection through row click, and only enabled selection through clicking the provided multi select checkboxes.
    </DocsPageSectionHeader>
    <DocsPageSectionContent>
        <DataGridRowSelectableMultipleSelectionExample />
    </DocsPageSectionContent>
    <DocsPageSectionSource Code="DataGridRowSelectableMultipleSelectionExample" />
</DocsPageSection>